<template>
  <div class="btn-filter">
    <div v-for="(item, index) in items" :key="index" class="btn-item" :selected="selected === index" @click="onItemClick(index)">
      {{ item }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// eslint-disable-next-line no-undef
defineProps({
  items: {
    type: Array,
    default: () => [],
  },
});

// eslint-disable-next-line no-undef
const emit = defineEmits(["change"]);

const selected = ref(0);

const onItemClick = (index) => {
  selected.value = index;
  emit("change", index);
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>